<!--
* @author: lzm
* @date: 2023年11月27日10:52:10
* @description：确认领用物料
* @update: 2023年11月27日10:52:16
-->
<template>
  <div class='confirmItem'>
    <el-dialog
      :title='title'
      :visible='showDialog'
      width='940px'
      center
      custom-class='my-dialog  table-normal'
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      @close='close'
    >
      <div class='form-top'>
        <el-form ref='addForm' :model='addForm' :rules='rules' label-width='100px'>
          <el-form-item label='工作任务'>
            <el-input
              style='width: 250px'
              v-model='addForm.taskName'
              placeholder='请输入任务名称'
            />
          </el-form-item>
          <el-form-item label='操作人' v-if='!isLogin'>
            <el-input
              style='width: 250px'
              v-model='addForm.nickName'
              placeholder='请输入操作人名称'
            />
          </el-form-item>
          <el-button class='chamfer-corners-8' type='primary' @click='addBtn'>
            {{isHsiang?"添加归还物料":"添加领用物料"}}
          </el-button>
        </el-form>
      </div>
      <el-table
        :data='tableData'
        fit
        style='width: 100%'
        header-row-class-name='tableHeader'
        header-cell-class-name='tableTrHeader'
        row-class-name='tableRow'
        cell-class-name='tableCell'>
        <el-table-column type='index' label='序号' align='center' width='80' />
        <el-table-column prop='goodsName' label='物料名称' align='center' />
        <el-table-column prop='goodsModel' label='规格型号' align='center' />
        <el-table-column
          prop='file'
          width='120'
          label='物料缩略图'
          align='center'>
          <template v-slot='{ row }'>
            <img v-if='row.goodsImage' :src='row.goodsImage' style='width: 60px; height: 60px' />
            <img v-else src='@/assets/shelf_manage_img/shelf-item.png' style='width: 60px; height: 60px' />
          </template>
        </el-table-column>
        <el-table-column
          prop='planCount'
          :label='isHsiang?"归还数量":"领用数量"'
          width='180'
          align='center'>
          <template v-slot='{ row }'>
            <div v-if='row.isEdit'>
              <el-input-number size='small'
                               controls-position='right'
                               v-model='row.planCount'
                               :ref="'count' + row.id"
                               :min='0'
                               :max='isHsiang ? 99999 : row.goodsStock'
                               inputmode='numeric'
                               :label='isHsiang?"归还数量":"领用数量"'></el-input-number>
              <!--              <el-input-->
              <!--                @input="inputNumbers"-->
              <!--                class="editInput"-->
              <!--                :ref="'count' + row.id"-->
              <!--                v-model="row.planCount"/>-->
              <el-button
                class='suffixBtn'
                icon='el-icon-check'
                type='text'
                @click.stop='editCountBtn(row)' />
            </div>
            <div v-else>
              <span class='weight'>
                {{ row.planCount }}
              </span>
              <div class='editBtn' @click='editCount(row)'></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop='' label='操作' align='center'>
          <template v-slot='{ row }'>
            <el-button type='text' class='revokeBtn' @click='revokeBtn(row)'>撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type='primary'
        class='chamfer-corners-8'
        @click='confirmBtn'
        style='margin-top: 10px'
      >
        确认{{isHsiang?"归还":"领用"}}
      </el-button>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import {mapGetters} from "vuex";

export default {
  components: {},
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '确认领用物料'
    },
    collectOrReturnData: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      addForm: {
        // 任务名称
        taskName: '',
        // 操作人
        nickName: ''
      },
      tableData: [],
      rules:{
        nickName: [
          { required: true, message: '请输入操作人', trigger: 'blur' }
        ]
      }
    }
  },
  created() {

  },
  watch: {
    showDialog(val) {
      // this.addForm.nickName = typeof this.userInfo ==='string'? JSON.parse(this.userInfo).nickName : this.userInfo.nickName
      // console.log('userInfo',this.userInfo)
      if (val) {
        this.tableData = [...this.collectOrReturnData]
        this.tableData.forEach(item => {
          this.$set(item, 'isEdit', false)
          this.$set(item, 'nickName', '')
        })
      } else {
        this.addForm = {
          taskName: '' // 任务名称
        }
        this.tableData = []
      }
    }
  },
  computed: {
    isHsiang() {
      return this.title === '确认归还物料'
    },
    ...mapGetters(['userInfo', 'isLogin']),
  },
  filters: {
    formatDate(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  methods: {
    // 输入数量
    inputNumbers(e) {
      // 限制只能输入数字
      e = e.replace(/[^\d]/g, '')
    },
    // 关闭弹窗清空所有值
    close() {
      this.addForm = {
        taskName: '' // 任务名称
      }
      this.tableData = []
      this.$emit('update:showDialog', false)
    },
    // 添加领用物料
    addBtn() {
      this.$emit('update:showDialog', false)
    },
    // 撤销按钮
    revokeBtn(item) {
      this.tableData.splice(this.tableData.indexOf(item), 1)
    },
    // 设置数量
    editCount(row) {
      row.isEdit = true
      let id = 'count' + row.id
      // 获取焦点
      this.$nextTick(() => {
        this.$refs[id].focus()
      })
    },
    // 修改数量
    editCountBtn(row) {
      if (!this.isHsiang&&!row.planCount) {
        this.$message({
          message: '请输入领用数量',
          type: 'warning'
        })
        return
      }
      row.isEdit = false
    },
    // 确认领用
    confirmBtn() {
      if (!this.tableData.length) {
        this.$message({
          message: '请先选择物料！',
          type: 'warning'
        })
        return
      }
      let isFinish=true
      for (let i = 0; i < this.tableData.length; i++) {
        if (!this.tableData[i].planCount) {
          isFinish=false
          break
        }
      }
      if (!this.isHsiang&&!isFinish) {
        this.$message({
          message: '请先设置领用数量！',
          type: 'warning'
        })
        return
      }
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.taskName) {
            this.tableData.forEach(item => {
              item.taskName = this.addForm.taskName
            })
          }
          this.tableData.forEach(item => {
            item.nickName = this.addForm.nickName
          })
          this.$emit('requisitionCompleted',this.tableData,this.addForm.taskName,this.addForm.nickName)
        }
      })

    }
  }
}
</script>
<style scoped lang='scss'>
@import '@/styles/_handle.scss';
.confirmItem {
  ::v-deep .el-input-number .el-input__inner {
    color: #000000;
    border: none;
    height: 40px;
    width: 100px;
    @include background('form_top_bg_color');
  }

  ::v-deep .el-input-number .el-input-number__increase {
    display: none;
  }

  ::v-deep .el-input-number .el-input-number__decrease {
    display: none;
  }

  ::v-deep .el-input-number.is-controls-right .el-input__inner {
    padding-right: 0;
    padding-left: 0;
  }
}
.form-top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 4px;
  height: 72px;
  @include background('table_head_bgcolor');
  border-radius: 10px;

  .el-form {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-form-item {
      margin-bottom: 0;
    }

    .chamfer-corners-8 {
      margin-left: 16px;
      font-size: 16px;
    }
  }

}

// 修改小图标样式
.suffixBtn {
  margin-left: 5px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  padding: 0;
}

// 正常展示宽度
.weight {
  width: 70px;
  display: inline-block;
}

::v-deep .editInput {
  width: 70px;
  height: 30px;

  .el-input__inner {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
  }
}

.editBtn {
  display: inline-block;
  margin-left: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  @include background('material_edit_icon');
}

.revokeBtn {
  font-size: 18px;
  @include font_color('material_edit_color');
}

::v-deep .el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  .chamfer-corners-8 {
    font-size: 18px;
  }
}

.el-row {
  text-align: center;
}

// 弹窗样式
::v-deep .el-dialog--center .el-dialog__body {
  padding: 0px 25px 30px;
}

// 表格样式
::v-deep .el-table {
  margin-top: 12px;
  background: transparent;
  border: none;
  // 表头行样式
  .tableHeader {
    height: 48px;
    -webkit-clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 15%,
        100% 85%,
        calc(100% - 10px) 100%,
        10px 100%,
        0 85%,
        0 15%
    );
    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 15%,
        100% 85%,
        calc(100% - 10px) 100%,
        10px 100%,
        0 85%,
        0 15%
    );
  }

  // 表头单元格样式
  .tableTrHeader {
    background-color: transparent;
    border: none;
    font-weight: 400;
    color: #fff;
    font-size: 18px;
  }

  // 表格行样式
  .tableRow {
    background-color: transparent;
    border: none;
  }

  // 表格单元格样式
  .tableCell {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
  }
}

// 去除表头底部横线
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border: none;
}

// 取消表格底部横线
::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: none;
}

::v-deep .el-table__body-wrapper {
  height: 30vh;
  overflow-y: auto;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .el-table__empty-block {
  font-size: 18px;
}

</style>
